<template>
  <el-dialog
    title="自动添加规则"
    :visible.sync="$attrs.visableIf"
    @close="handleCloseDialog"
    width="800px"
    append-to-body
    class="borderb_dia"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="small"
      label-width="150px"
      label-position="left"
    >
      <el-form-item label="新建自动加入：" prop="status">
        <el-switch
          v-model="form.open">
        </el-switch>
        <span style="color: #888; font-size: 12px; margin-left: 10px;">开启后，新群创建5分钟后判断，符合条件的群自动加入</span>
      </el-form-item>
      <div  v-if="!form.open" style="height: 116px; background-color: rgb(249, 249, 249); display: flex; align-items: center; justify-content: center;"><span style="color: rgb(48, 112, 255);">开启功能后才能设置相关规则</span></div>
      <template v-else>
        <el-form-item label="加入方式：" prop="status">
          <el-radio-group v-model="form.type" class="budget_type">
            <el-radio :label="Number(item.value)" v-for="(item,index) in fileTypeList" :key="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="condition">
          <div class="item-title">群名称：</div>
          <el-form-item prop="userName2">
            <el-select
              v-model="form.userName6"
              @change="handleQuery"
              placeholder="请选择群类型"
              class="select-left"
            >
              <el-option
                v-for="item in groupList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-input placeholder="可输入多个，按enter确认" v-model="input3"  class="select-right" @keyup.enter.native="handleQuery">
              <el-button slot="append" icon="el-icon-plus"  @click="handleQuery"></el-button>
            </el-input>
          </el-form-item>
          <div class="item-title">群标签：</div>
          <el-form-item prop="userName2">
            <el-select
              v-model="form.userName6"
              @change="handleQuery"
              placeholder="请选择所有标签"
              class="select-left"
            >
              <el-option
                v-for="item in labelList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <multipleSelect size="small" placeholder='智能标签'  class="select-right" :receiverNameOpt='lableOpt'></multipleSelect>
          </el-form-item>
          <div class="item-title">其他：</div>
          <el-form-item prop="userName5" >
            <div class="flex">
              <el-button  class="select-left">群成员数</el-button>
              <minOrMaxNumber  :placeholder="`群人数`" @getNumber="getNumber"></minOrMaxNumber>
            </div>

          </el-form-item>
          <div class="seting">
            <div class="seting-left">设置排除条件
              <el-switch v-model="queryParams.value"></el-switch>
            </div>
            <span class="seting-right">开启后将排除满足以下条件客户群</span>
          </div>
          <template>
            <div class="item-title">群名称：</div>
            <el-form-item prop="userName2">
              <el-select
                v-model="queryParams.userName6"
                @change="handleQuery"
                placeholder="请选择群类型"
                class="select-left"
              >
                <el-option
                  v-for="item in groupList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-input placeholder="可输入多个，按enter确认" v-model="input3"  class="select-right" @keyup.enter.native="handleQuery">
                <el-button slot="append" icon="el-icon-plus"  @click="handleQuery"></el-button>
              </el-input>
            </el-form-item>
            <div class="item-title">群标签：</div>
            <el-form-item prop="userName2">
              <el-select
                v-model="queryParams.userName6"
                @change="handleQuery"
                placeholder="请选择所有标签"
                class="select-left"
              >
                <el-option
                  v-for="item in labelList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <multipleSelect size="small" placeholder='智能标签'  class="select-right" :receiverNameOpt='lableOpt'></multipleSelect>
            </el-form-item>
            <div class="item-title">其他：</div>
            <el-form-item prop="userName5" >
              <div class="flex">
                <el-button  class="select-left">群成员数</el-button>
                <minOrMaxNumber  :placeholder="`群人数`" @getNumber="getNumber"></minOrMaxNumber>
              </div>

            </el-form-item>
          </template>
        </div>
      </template>


    </el-form>
    <div slot="footer" class="footer-btn">
      <el-button @click="handleCloseDialog">取消</el-button>
      <el-button type="primary" @click="submitForm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { validPhone, validPassword } from "@/utils/validate";
// import { editInfo } from "@/api/advmaster";
import MultipleSelect from "@/views/components/multipleSelect.vue";

export default {
  components: {
    MultipleSelect,
    'minOrMaxNumber': () => import('@/views/components/minOrMaxNumber.vue'),//导出弹窗
  },
  data() {
    return {
      timeRange:[],//时间范围
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      input3:null,
      form: {
        open:true,
      },
      fileTypeList: [
        {value: 1, label: "全部新群自动加入"},
        {value: 2, label: "符合条件的新群自动加入"},
      ],
      groupList: [
        //群查找
        {id: 1, name: "技术组"},
        {id: 2, name: "人事组"},
      ],
      labelList:[
        //称呼
        {id: 1, name: "含任意标签"},
        {id: 2, name: "含所有标签"},
        {id: 3, name: "未打任何标签"},
      ],
      groupMgtList:[
        {id: 1, name: "群主/群管理员"},
        {id: 2, name: "群主"},
        {id: 3, name: "群成员"},
      ],
      lableOpt: [
        {value: 1, label: '客户等级', children: [
            {value: 3, label: '核心',},
            {value: 4, label: '重要',},
            {value: 5, label: '一般',}
          ]
        },
        {value: 2, label: '客户等级2', children: [
            {value: 6, label: '可爱',},
            {value: 7, label: '知性',},
            {value: 8, label: '性感',}
          ]}
      ],
      options: [{
        value: 1,
        label: '小红',
        WeChatNum: 2,
        WeChatName: '智行',
      }, {
        value: 2,
        label: '小军',
        WeChatNum: 1,
        WeChatName: '锐行',
      }, {
        value: 3,
        label: '小李',
        WeChatNum: 1,
        WeChatName: '锐行',
      }],
    timeSet:{
      selectableRange: `08:00:00  - 23:59:00`,
          format:' HH:mm'
    },
      // 表单校验
      rules: {
        name: [{required: true, message: "请输入用户名", trigger: "blur"}],
        email: [
          {
            required: true,
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur",
          },
        ],
        password: [],
        status: [{required: true, message: "请选择状态", trigger: "change"}],
      },
      queryParams:{
        pageNum:1,
        pageSize: 10,
      },
    };
  },
  props: {
    rowitem: {
      default: null,
    },
  },
  created() {

  },
  methods: {
    changeTime(val){
      console.log('修改val',val);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    //重置表单
    handleReset() {
      this.resetForm("form");
    },

    handleCloseDialog() {
      this.$emit("update:visableIf", false);
    },
    getNumber(obj){
      console.log('获取最大值',obj);
    },
    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            // editInfo(this.form).then(() => {
            //   this.$modal.msgSuccess('修改成功')
            //   this.handleCloseDialog();
            //   this.$emit('getList');
            // })
          }
        }
      })
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body {
  height: auto !important;
}
.operate-Big {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.group-right {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}

.item-big {
  display: flex;

  ::v-deep {
    .el-input {
      width: 90px;
      margin-right: 10px;

      .el-input__inner {

      }
    }

  }
}
.el-form {
  padding: 0px 20px;
  .el-form-item {
    margin-bottom: 20px;
    margin-right: 0px;
    display: flex;
    ::v-deep .el-form-item__content {
      margin-left: 0px !important;
    }
    .select-left {
      width: 132px;
      margin-right:5px;

    }
    .select-right {
      width:400px !important;
    }
  }
}
.condition {
  padding: 15px;
  border: 1px solid #eee;
}
.seting {
  display: flex;
  justify-content: space-between;
  background: rgb(247, 247, 247);
  height: 38px;
  margin: 20px 0px 0px;
  padding: 8px;
  row-gap: 0px;
  font-size: 14px;
  margin-bottom: 10px;
  .seting-right {
    color: rgb(255, 153, 0);
  }
}
.item-title {
  color: rgba(0, 0, 0, .45);
}
</style>
